<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外网首页</title>
    <link rel="stylesheet" href="src/images/reset.css">
    <link rel="stylesheet" href="src/css/idangerous.swiper2.7.6.css">
    <link rel="stylesheet" href="src/css/home-version02.css">
    <link rel="stylesheet" href="src/css/animate.min.css">
</head>
<body>
    <div class="page-home-net">
        <!-- logo-导航 -->
        <div class="page-top-wrap">
            <!--头部-->
            <div class="header-wrap">
                <div class="banxin header">
                    <div class="fl header-logo">
                        <img src="./src/images/logo.png" alt="" class="logo">
                        <span class="header-name">天津市港口统一收费服务平台</span>
                    </div>
                    <div class="fr header-logreg">
                        <a href="###">登录</a><span class="line"> |</span><a href="###" class="active">注册</a>
                    </div>
                </div>
            </div>
            <!--导航-->
            <div class="nav-wrap">
                <div class="banxin nav clearfix">
                    <ul class="nav-list clearfix fl">
                        <li><a href="###" class="active">首页</a></li>
                        <li><a href="###">工作动态</a></li>
                        <li><a href="###">港口资讯</a></li>
                        <li><a href="###">收费目录</a></li>
                        <li><a href="###">业务办理</a></li>
                        <li><a href="###">服务指南</a></li>
                    </ul>
                    <div class="search fr">
                        <input type="text" placeholder="输入搜索的内容">
                        <div class="icon-search">
                            <img src="src/images/search.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--轮播图-->
        <div class="swiper-container banner-wrap">
          <div class="swiper-wrapper">
            <div class="swiper-slide slide1">
                <img src="src/images/banner1.png" alt="">
            </div>
            <div class="swiper-slide slide2">
                <img src="src/images/banner2.png" alt="">
            </div>
            <div class="swiper-slide slide3">
                <img src="src/images/banner3.png" alt="">
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>

        <!--第一部分-->
        <div class="page-home-part banxin clearfix mb-12">
            <!--业务办理-->
            <div class="business-manage left-width fl">
                <div class="page-home-part-title">
                    <p>业务办理</p>
                </div>
                <div class="business-manage-main part-main-bg">
                    <div class="business-list clearfix">
                        <div class="business-item-box business-item-box1">
                            <div class="item-icon">
                                <img src="src/images/business1.png" alt="">
                            </div>
                            <div class="business-item business-item1">
                                <div class="item-title">缴费业务</div>
                                <div class="item-operation">点击进入</div>
                            </div>
                        </div>
                        <div class="business-item-box business-item-box2">
                            <div class="item-icon ">
                                <img src="src/images/business2.png" alt="">
                            </div>
                            <div class="business-item business-item2">

                                <div class="item-title">收费业务</div>
                                <div class="item-operation">点击进入</div>
                            </div>
                        </div>
                        <div class="business-item-box business-item-box3">
                            <div class="item-icon">
                                <img src="src/images/business3.png" alt="">
                            </div>
                            <div class="business-item business-item3">

                                <div class="item-title">费项清单</div>
                                <div class="item-operation">点击进入</div>
                            </div>
                        </div>
                        <div class="business-item-box business-item-box4">
                            <div class="item-icon">
                                <img src="src/images/business4.png" alt="">
                            </div>
                            <div class="business-item business-item4">

                                <div class="item-title">明码标价</div>
                                <div class="item-operation">点击进入</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--收费项目查询-->
            <div class="chargetem-search right-width fr">
                <div class="page-home-part-title">
                    <p>收费项目查询</p>
                </div>
                <div class="chargetem-search-main">
                    <!--收费项目查询-->
                    <div class="data-search">
                        <div class="search-form">
                            <div class="search-form-label"><span class="title-txt">查费项</span></div>
                            <div class="search-form-input">
                                <input type="text" placeholder="请输入收费项目名称">
                                <button class="btn-search"></button>
                            </div>
                            <div class="search-form-label"><span class="title-txt">比价格</span></div>
                            <div class="search-form-input">
                                <input type="text" placeholder="请输入收费项目名称">
                                <button class="btn-search"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--第二部分-->
        <div class="page-home-part02 banxin clearfix">
            <!--服务指南-->
            <div class="service-guide left-width fl">
                <div class="page-home-part-title">
                    <div>服务指南
                        <div class="fr more"><a href=""><span>更多</span><img src="src/images/more1.png" alt="" class="more-icon"></a></div>
                    </div>
                </div>
                <!--服务指南主体开始-->
                <div class="service-guide-main part-main-bg">
                    <div class="tab-wrapper clearfix">
                        <ul class="tab-menu service-guide-left fl">
                            <li class="active"><a href="javascript:void(0);" class="tabs-title-item">平台相关</a></li>
                            <li><a href="javascript:void(0);" class="tabs-title-item">银行相关</a></li>
                            <li><a href="javascript:void(0);" class="tabs-title-item">缴费相关</a></li>
                            <li><a href="javascript:void(0);" class="tabs-title-item">收费相关</a></li>
                        </ul>
                        <div class="tab-content service-guide-right fl">
                            <!--平台相关-->
                            <div class="tab-content-item">
                                <ul>
                                    <li><a href="">支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表</a></li>
                                    <li><a href="">支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表</a></li>
                                    <li><a href="">支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表</a></li>
                                    <li><a href="">支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表</a></li>
                                    <li><a href="">支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表</a></li>
                                    <li><a href="">支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表</a></li>
                                    <li><a href="">支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表</a></li>
                                    <li><a href="">支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表</a></li>
                                    <li><a href="">支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表</a></li>
                                    <li><a href="">支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表</a></li>
                                </ul>
                            </div>
                            <!--银行相关-->
                            <div class="tab-content-item">
                                <ul>
                                    <li><a href="">支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表</a></li>
                                    <li><a href="">支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表</a></li>
                                </ul>
                            </div>
                            <!--缴费相关-->
                            <div class="tab-content-item">
                                <ul>
                                    <li><a href="">支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表</a></li>
                                    <li><a href="">支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表</a></li>
                                    <li><a href="">支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表</a></li>
                                </ul>
                            </div>
                            <!--收费相关-->
                            <div class="tab-content-item">
                                <ul>
                                    <li><a href="">支持银行列表支持银行列表支持银行列表支持银行列表支持银行列表</a></li>
                                </ul>
                            </div>

                        </div>
                    </div>
                </div>
                <!--服务指南主体结束-->
            </div>
            <!--模拟实操等-->
            <div class="part02-right right-width fl">
                <div class="page-home-part-title" style="visibility: hidden">
                    <div>服务指南</div>
                </div>
                <div class="part02-right-main clearfix">
                    <!--模拟实操-->
                    <div class="other-item other-item01 fl">
                        <a href="">
                            <div class="other-item-top">
                                <img src="src/images/01.png" alt="">
                                <div class="sj-icon"></div>
                            </div>
                            <div class="other-item-btm">
                                <span class="mr-12">模拟</span><span>实操</span>
                            </div>
                        </a>
                    </div>
                    <!--常见问题-->
                    <div class="other-item other-item02 fl">
                        <a href="">
                            <div class="other-item-top">
                                <img src="src/images/02.png" alt="">
                                <div class="sj-icon"></div>
                            </div>
                            <div class="other-item-btm">
                                <span class="mr-12">常见</span><span>问题</span>
                            </div>
                        </a>
                    </div>
                    <!--操作手册-->
                    <div class="other-item other-item03 fl">
                        <a href="">
                            <div class="other-item-top">
                                <img src="src/images/03.png" alt="">
                                <div class="sj-icon"></div>
                            </div>
                            <div class="other-item-btm">
                                <span class="mr-12">操作</span><span>手册</span>
                            </div>
                        </a>
                    </div>
                    <!--APP下载-->
                    <div class="other-item other-item04 fl">
                        <a href="">
                            <div class="other-item-top">
                                <img src="src/images/04.png" alt="">
                                <div class="sj-icon"></div>
                            </div>
                            <div class="other-item-btm">
                                <span class="mr-12">APP</span><span>下载</span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

        </div>

        <!--关于-->
        <div class="about-wrap">
            <div class="banxin">
                <span class="about-wrap-title">服务热线</span>
                <span>咨询电话：022-60306030</span>
                <span>中国银行：022-87771567</span>
                <span>建设银行：022-25601696</span>
                <span>工商银行：022-65750285</span>
                <span>服务时间：周一至周五 9:00-11:30 13:30-16:30</span>
            </div>
        </div>
        <!--版权-->
        <div class="copyright">
            <p>天津商务委员会信息中心津ICP备09002911号</p>
            <p>Copyright  天津市商务委员会All rights reserved</p>
        </div>

    </div>

    <script src="src/js/jquery-1.10.1.min.js"></script>
    <script src="src/js/idangerous.swiper.min.js"></script>
    <script src="src/js/swiper.animate1.0.2.min.js"></script>

    <script language="javascript">
        // banner
        var mySwiper = new Swiper ('.banner-wrap', {
            pagination: '.swiper-pagination',
            paginationClickable :true,
            autoplay : 3000,
            loop: true,
            speed:300,
            autoplayDisableOnInteraction : false,
            onProgressChange: function(swiper){
            for (var i = 0; i < swiper.slides.length; i++){
            var slide = swiper.slides[i];
            var progress = slide.progress;
            var translate = progress*swiper.width;  
            var opacity = 1 - Math.min(Math.abs(progress),1);
            slide.style.opacity = opacity;
            swiper.setTransform(slide,'translate3d('+translate+'px,0,0)');
            }
            },
            onTouchStart:function(swiper){
            for (var i = 0; i < swiper.slides.length; i++){
            swiper.setTransition(swiper.slides[i], 0);
            }
            },
            onSetWrapperTransition: function(swiper, speed) {
            for (var i = 0; i < swiper.slides.length; i++){
            swiper.setTransition(swiper.slides[i], speed);
            }
            }
        });
    </script>


    <!--tab切换-->
    <script type="text/javascript">

        $(document).ready(function() {

            var $wrapper = $('.tab-wrapper'),
                $allTabs = $wrapper.find('.tab-content > div'),
                $tabMenu = $wrapper.find('.tab-menu li');


            $allTabs.not(':first-of-type').hide();
            // $tabMenu.filter(':first-of-type').find(':first').width('100%')

            $tabMenu.each(function(i) {
                $(this).attr('data-tab', 'tab'+i);
            });

            $allTabs.each(function(i) {
                $(this).attr('data-tab', 'tab'+i);
            });

            $tabMenu.on('click', function() {

                var dataTab = $(this).data('tab'),
                    $getWrapper = $(this).closest($wrapper);

                $getWrapper.find($tabMenu).removeClass('active');
                $(this).addClass('active');


                // $(this).find($line).animate({'width':'100%'}, 'fast');
                $getWrapper.find($allTabs).hide();
                $getWrapper.find($allTabs).filter('[data-tab='+dataTab+']').show();
            });

        });//end ready
    </script>
</body>
</html>